<template>
    <div class="cinema-detail-page">
        <van-nav-bar left-arrow @click-left="$router.back(-1)" :fixed="true" :title="$t('m.Cinema')"/>
        <div style="padding: 23px"></div>
        <div class="explore-item loc" v-if="cinema">
            <div class="info-location">
                <div class="explore-item-label label-title">{{getCinemaName(cinema)}}</div>
                <div class="explore-item-label">{{getStreetName(cinema)}}</div>
                <div class="explore-item-label" v-show="cinema.townshipId || cinema.regionId">{{getTownshipType(cinema.townshipId)}},{{getRegionTypeStr(cinema.regionId)}}</div>
            </div>
           <van-button type="default" size="mini" class="map-btn" @click="goToMap()" v-show="cinema.latitude || cinema.longitude" >{{$t('m.Map')}}</van-button>
        </div>
        <div v-if="cinema.movies.length >0">
            <swiper :options="swiperOption" ref="mySwiper" @slideChange="swiperChange" class="swiper-box" :style="`background-image: url(${cinema.movies[activeIndex].coverPhoto})`">
                <swiper-slide v-for="(item, index) in cinema.movies" :key="'swipe_' + index"><img :src="item.coverPhoto"></swiper-slide>
                <!--<div class="swiper-pagination" slot="pagination"></div>-->
            </swiper>
            <div class="explore-item movie-item" >
                <div class="explore-item-label label-title">{{translateString(cinema.movies[activeIndex].title)}}</div>
                <div class="explore-item-label">{{getGenreTypeText(cinema.movies[activeIndex].genreTypes)}}</div>
                <div class="explore-item-label">{{getTownshipType(cinema.townshipId)}},{{getRegionTypeStr(cinema.regionId)}}</div>
            </div>
            <van-tabs class="items-tab-title" @click="" :ellipsis="false">
                <van-tab :title="getTimeDate(items.showtimeDate)" v-for="(items, indexTab) in moviesDates" :key="indexTab">
                    <div v-for="(i, index) in items.times" :key="'index_' + index" class="time-list">{{changeTimeStr(i.time)}}</div>
                </van-tab>
            </van-tabs>
            <!--<van-goods-action-big-btn :text="$t('m.Call')" v-show="cinema.phone && cinema.phone != ''"-->
                                      <!--@click="onClickCallBtn(cinema.phone)" class="buy-btn"/>-->
            <van-goods-action-big-btn @click="onClickCallBtn(cinema.phone)" icon="location-o" class="call-btn">
                <div class="phone-icon"><van-icon name="phone" /></div>
                <div>{{$t('m.Call')}}</div>
            </van-goods-action-big-btn>
        </div>

    </div>
</template>
<script>
    import 'swiper/dist/css/swiper.css'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'

    import {getCimenaDetail, getMovieTime} from '../../static/api/mgc_api'
    import Qs from 'qs'
    import township from '../../static/json/township'
    import region from '../../static/json/region'
    import mm_region from '../../static/mmJson/region'
    import mm_township from '../../static/mmJson/township'
    import genre from '../../static/json/genre'
    import mm_genre from '../../static/mmJson/genre'
    export default {
        data() {
            return {
                id: '',
                cinema:{
                    movies: []
                },
                loading: false,
                timesLoading: false,
                swiperOption: {
                    slidesPerView: 4.5,
                    spaceBetween: 20,
                    centeredSlides: true,
                    slideToClickedSlide: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    }
                },
                activeIndex: 0,
                moviesDates: [],
            }
        },
        components: {
            swiper,
            swiperSlide
        },
        computed: {
            regionJson() {
                if (this.$store.state.store.localLang == 'MM') {
                    return mm_region
                } else {
                    return region
                }
            },
            townshipJson() {
                if (this.$store.state.store.localLang == 'MM') {
                    return mm_township
                } else {
                    return township
                }
            },
            swiper() {
                return this.$refs.mySwiper.swiper;
            },
            genreJson() {
                if (this.$store.state.store.localLang == 'MM') {
                    return mm_genre
                } else {
                    return genre
                }
            },
        },
        methods: {
            swiperChange(e){
                this.activeIndex = this.swiper.activeIndex
                this.initMovieTime()
            },
            translateString(str) {
                if (!str) return ''
                return this.$translateLang(str, 'unicodeTozawgyi');
            },
            getCinemaName(item){
                if(this.$store.state.store.localLang == 'MM'){
                    return this.translateString(item.nameBurmese)
                } else{
                    return this.translateString(item.name)
                }
            },
            getStreetName(item){
                if(this.$store.state.store.localLang == 'MM'){
                    return this.translateString(item.streetBurmese)
                } else{
                    return this.translateString(item.street)
                }
            },
            getTownshipType (t) {
                let str = ''
                this.townshipJson.forEach((item) => {
                    if (item.value == t) {
                        str = item.text || ''
                    }
                })
                return str
            },
            getRegionTypeStr(t) {
                let str = ''
                this.regionJson.forEach((item) => {
                    if (item.value == t) {
                        str = item.text || ''
                    }
                })
                return str
            },
            getGenreTypeText(geners){
                let str = ''
                for(let i=0; i<geners.length; i++){
                    if (i == 0) {
                        str= this.getGenreTypesItem(geners[i])
                    } else {
                        str= str + ' , ' + this.getGenreTypesItem(geners[i])
                    }
                }
                return str
            },
            getGenreTypesItem (it) {
                let str = ''
                this.genreJson.forEach((item) => {
                    if (item.value == it) {
                        str = item.text || ''
                    }
                })
                return str
            },
            initInfo (id) {
                this.loading = true
                getCimenaDetail(id).then((res) => {
                    if (res.data.data) {
                        if (res.data.data.errorID === 0) {
                            this.cinema = res.data.data.object.info
                            if(res.data.data.object.info.movies.length > 0) {
                                this.initMovieTime()
                            }
                            this.loading = false
                        } else {
                            this.$toast(res.data.data.message)
                            this.loading = false
                        }
                    }
                })
                    .catch((error) => {
                        console.log(error)
                        this.$toast('error,please try again leter')
                        this.loading = false
                    })
            },
            initMovieTime(){
                this.timesLoading = true
                let searchForm = {};
                searchForm.movieId = this.cinema.movies[this.activeIndex].id
                searchForm.cinemaId = this.id
                let params = Qs.stringify(searchForm, {arrayFormat: 'repeat'})
                getMovieTime(params).then((res) => {
                    if (res.data.data) {
                        if (res.data.data.errorID === 0) {
                            this.moviesDates = res.data.data.object
                            console.log(this.moviesDates,'this.moviesDates')
                            this.timesLoading = false
                        } else {
                            this.$toast(res.data.data.message)
                            this.timesLoading = false
                        }
                    }
                })
                    .catch((error) => {
                        console.log(error)
                        this.$toast('error,please try again leter')
                        this.timesLoading = false
                    })
            },
            getTimeDate(date){

                let str = ''
                let movieTimes = new Date(date)
                let m = movieTimes.getMonth() + 1
                let d = movieTimes.getDate()
                if (m < 10) {
                    m = '0' + m
                }
                // if (d < 10) {
                //     d = '0' + d
                // }
                if(this.judgeTime(date) == '0'){
                    str = 'Today ' + m + '-' + d;
                } else if(this.judgeTime(date) == '1') {
                    str = 'Tomorrow ' + m + '-' + d;
                } else {
                    str = m + '-' + d;
                }
                return str
            },
            judgeTime(data) {
                let date = new Date(data);
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();
                let d1 = new Date(year + '/' + month + '/' + day);
                let dd = new Date();
                let y = dd.getFullYear();
                let m = dd.getMonth() + 1;
                let d = dd.getDate();
                let d2 = new Date(y + '/' + m + '/' + d);
                let iday = parseInt(d1 - d2) / 1000 / 60 / 60 / 24;
                return iday;
            },
            changeTimeStr(timeStr){
                let str = ''
                let start = timeStr.substring(0,5)
                let end = timeStr.slice(-2)
                return str = start + '  ' + end
            },
            onClickCallBtn(p) {
                if (p) {
                    window.location.href = 'tel:' + p
                }
            },
            goToMap(){
                this.$router.push({
                    path:'/map-details/cinema-map',
                    query:{
                        latitude: this.cinema.latitude,
                        longitude: this.cinema.longitude,
                        name: this.getCinemaName(this.cinema),
                        street: this.getStreetName(this.cinema),
                        location: this.getTownshipType(this.cinema.townshipId)+ ',' +this.getRegionTypeStr(this.cinema.regionId),
                    }
                })
            }
        },
        mounted(){
            if(this.$route.query.id) {
                this.id = this.$route.query.id || ''
                this.initInfo(this.id)
            }

        }
    };
</script>
<style>
    .cinema-detail-page .swiper-container{
        height: 120px;
        overflow: hidden;
    }
    .cinema-detail-page .swiper-wrapper{
        align-items: flex-end;
    }
    .cinema-detail-page .swiper-slide{
        background: #3e779d;
        height: 70%;
    }
    .cinema-detail-page .swiper-slide-active{
        transform: scale(1.25) translateY(-6px);
        border: 1px solid #fff;
        border-bottom: none;
    }
    .cinema-detail-page .van-tab span{
        min-width: 60px;
    }
    .cinema-detail-page .van-tabs__line{
        background-color: #FF6699;
    }
    .cinema-detail-page .van-goods-action-big-btn{
        background-color: #FF6699;
        border: 1px solid #FF6699;
    }
    .cinema-detail-page .van-goods-action-big-btn .van-icon{
        font-size: 20px;
    }
    .cinema-detail-page .van-button__text{
        display: flex;
        /*align-items: center;*/
        justify-content:center;
    }
</style>
<style scoped>
    .explore-item{
        /*border-bottom: 1px solid #e0e0e0;*/
        padding: 8px 4%;
    }
    .explore-item.loc{
        display: flex;
    }
    .explore-item-label{
        color: rgb(153, 153, 153);
        line-height: 150%;
        font-size: 12px;
    }
    .explore-item-label.label-title{
        color: #2c3e50;
        font-size: 14px;
    }
    .info-location{
        flex: 1;
    }
    .cinema-detail-page .swiper-slide img{
        display: block;
        width: 100%;
        height: 100%;
    }
    .swiper-box{
        position: absolute;
        width: 100%;
        height: 120px;
        background: #ededed;
        -webkit-background-size: 3000%;
        background-repeat: no-repeat;
        background-position-y: 40%;
        -webkit-transition: background .5s;
        transition: background .5s;
        -webkit-backface-visibility: hidden;
    }
    .movie-item{
        padding-top: 120px;
        text-align: center;
        border-bottom: 1px solid #e0e0e0;
    }
    .time-list{
        padding: 12px 4%;
        border-bottom: 1px solid #e0e0e0;
    }
    .call-btn{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #FF6699;
    }
    .phone-icon{
        display: flex;
        width: 20px;
        margin-right: 6px;
        align-items:center;
    }
    .map-btn{
        /*position: absolute;*/
        /*right: 12px;*/
        /*bottom: 0;*/
        width: 50px;

    }
</style>
